<template>
  <view class="login-page">
    <!-- 动态背景 -->
    <view class="dynamic-bg">
      <!-- 漂浮圆圈 -->
      <view class="floating-circle circle-1"></view>
      <view class="floating-circle circle-2"></view>
      <view class="floating-circle circle-3"></view>
      <view class="floating-circle circle-4"></view>
    </view>

    <scroll-view scroll-y class="content-scroll">
      <!-- 返回首页按钮 -->
      <view class="back-btn-wrap">
        <view class="back-btn" @click="handleBack">
          <u-icon name="arrow-left" color="#1f2937" size="18"></u-icon>
        </view>
      </view>

      <!-- Logo和标题 -->
      <view class="logo-section">
        <view class="logo-wrap">
          <FaIcon name="leaf" color="#ffffff" :size="80" />
        </view>
        <text class="app-title">壹加壹农业</text>
        <text class="app-subtitle">智慧农业 · 美好生活</text>
        <view class="pulse-dots">
          <view class="dot"></view>
          <view class="dot delay-1"></view>
          <view class="dot delay-2"></view>
        </view>
      </view>

      <!-- 登录/注册表单 -->
      <view class="form-section">
        <view class="form-card">
          <!-- 标签切换 -->
          <view class="tab-bar">
            <view 
              :class="['tab-item', { 'active': currentTab === 'login' }]"
              @click="switchTab('login')"
            >
              <text class="tab-text">登录</text>
            </view>
            <view 
              :class="['tab-item', { 'active': currentTab === 'register' }]"
              @click="switchTab('register')"
            >
              <text class="tab-text">注册</text>
            </view>
          </view>

          <!-- 登录表单 -->
          <view v-if="currentTab === 'login'" class="form-content">
            <!-- 账号输入 -->
            <view class="form-item">
              <view class="label">
                <u-icon name="account" color="#10b981" size="12"></u-icon>
                <text class="label-text">账号</text>
              </view>
              <view class="input-wrap">
                <u-icon name="account" color="#6b7280" size="14" style="margin-right: 12rpx;"></u-icon>
                <input 
                  v-model="loginForm.account" 
                  type="text" 
                  placeholder="请输入账号/手机号"
                  class="input-field"
                />
              </view>
            </view>

            <!-- 密码输入 -->
            <view class="form-item">
              <view class="label">
                <u-icon name="lock" color="#10b981" size="12"></u-icon>
                <text class="label-text">密码</text>
              </view>
              <view class="input-wrap">
                <u-icon name="lock" color="#6b7280" size="14" style="margin-right: 12rpx;"></u-icon>
                <input 
                  v-model="loginForm.password" 
                  :type="loginPasswordVisible ? 'text' : 'password'"
                  placeholder="请输入密码"
                  class="input-field"
                />
                <u-icon 
                  :name="loginPasswordVisible ? 'eye' : 'eye-off'" 
                  color="#6b7280" 
                  size="14"
                  @click="loginPasswordVisible = !loginPasswordVisible"
                ></u-icon>
              </view>
            </view>

            <!-- 验证码 -->
            <view class="form-item">
              <view class="label">
                <u-icon name="shield" color="#10b981" size="12"></u-icon>
                <text class="label-text">验证码</text>
              </view>
              <view class="captcha-row">
                <view class="input-wrap flex-1">
                  <u-icon name="shield" color="#6b7280" size="14" style="margin-right: 12rpx;"></u-icon>
                  <input 
                    v-model="loginForm.captcha" 
                    type="text" 
                    placeholder="请输入验证码"
                    maxlength="4"
                    class="input-field"
                  />
                </view>
                <view class="captcha-img" @click="refreshCaptcha">
                  <text class="captcha-text">{{ captchaCode }}</text>
                </view>
              </view>
            </view>

            <!-- 记住密码和忘记密码 -->
            <view class="remember-row">
              <label class="remember-label">
                <checkbox 
                  :checked="rememberPassword" 
                  @click="rememberPassword = !rememberPassword"
                  color="#10b981"
                />
                <text class="remember-text">记住密码</text>
              </label>
              <text class="forgot-text" @click="showForgotModal = true">忘记密码？</text>
            </view>

            <!-- 协议 -->
            <view class="agree-row">
              <checkbox 
                :checked="agreeLogin" 
                @click="agreeLogin = !agreeLogin"
                color="#10b981"
              />
              <text class="agree-text">
                我已阅读并同意
                <text class="link-text">《用户协议》</text>
                和
                <text class="link-text">《隐私政策》</text>
              </text>
            </view>

            <!-- 登录按钮 -->
            <button class="submit-btn" @click="handleLogin">
              <u-icon name="arrow-right-double" color="#ffffff" size="14" style="margin-right: 8rpx;"></u-icon>
              登录
            </button>
          </view>

          <!-- 注册表单 -->
          <view v-if="currentTab === 'register'" class="form-content">
            <!-- 手机号输入 -->
            <view class="form-item">
              <view class="label">
                <u-icon name="phone" color="#10b981" size="12"></u-icon>
                <text class="label-text">手机号</text>
              </view>
              <view class="input-wrap">
                <u-icon name="phone" color="#6b7280" size="14" style="margin-right: 12rpx;"></u-icon>
                <input 
                  v-model="registerForm.phone" 
                  type="number" 
                  placeholder="请输入手机号"
                  maxlength="11"
                  class="input-field"
                />
              </view>
            </view>

            <!-- 密码输入 -->
            <view class="form-item">
              <view class="label">
                <u-icon name="lock" color="#10b981" size="12"></u-icon>
                <text class="label-text">密码</text>
              </view>
              <view class="input-wrap">
                <u-icon name="lock" color="#6b7280" size="14" style="margin-right: 12rpx;"></u-icon>
                <input 
                  v-model="registerForm.password" 
                  :type="registerPasswordVisible ? 'text' : 'password'"
                  placeholder="请输入密码(6-20位)"
                  class="input-field"
                />
                <u-icon 
                  :name="registerPasswordVisible ? 'eye' : 'eye-off'" 
                  color="#6b7280" 
                  size="14"
                  @click="registerPasswordVisible = !registerPasswordVisible"
                ></u-icon>
              </view>
            </view>

            <!-- 确认密码 -->
            <view class="form-item">
              <view class="label">
                <u-icon name="lock" color="#10b981" size="12"></u-icon>
                <text class="label-text">确认密码</text>
              </view>
              <view class="input-wrap">
                <u-icon name="lock" color="#6b7280" size="14" style="margin-right: 12rpx;"></u-icon>
                <input 
                  v-model="registerForm.confirmPassword" 
                  type="password"
                  placeholder="请再次输入密码"
                  class="input-field"
                />
              </view>
            </view>

            <!-- 短信验证码 -->
            <view class="form-item">
              <view class="label">
                <u-icon name="phone" color="#10b981" size="12"></u-icon>
                <text class="label-text">短信验证码</text>
              </view>
              <view class="captcha-row">
                <view class="input-wrap flex-1">
                  <u-icon name="phone" color="#6b7280" size="14" style="margin-right: 12rpx;"></u-icon>
                  <input 
                    v-model="registerForm.smsCode" 
                    type="number" 
                    placeholder="请输入短信验证码"
                    maxlength="6"
                    class="input-field"
                  />
                </view>
                <button 
                  class="code-btn" 
                  :class="{ 'disabled': smsCountdown > 0 }"
                  :disabled="smsCountdown > 0"
                  @click="sendSmsCode"
                >
                  {{ smsCountdown > 0 ? `${smsCountdown}秒后重发` : '获取验证码' }}
                </button>
              </view>
            </view>

            <!-- 协议 -->
            <view class="agree-row">
              <checkbox 
                :checked="agreeRegister" 
                @click="agreeRegister = !agreeRegister"
                color="#10b981"
              />
              <text class="agree-text">
                我已阅读并同意
                <text class="link-text">《用户协议》</text>
                和
                <text class="link-text">《隐私政策》</text>
              </text>
            </view>

            <!-- 注册按钮 -->
            <button class="submit-btn" @click="handleRegister">
              <u-icon name="plus" color="#ffffff" size="14" style="margin-right: 8rpx;"></u-icon>
              注册
            </button>
          </view>
        </view>
      </view>

      <!-- 底部安全区 -->
      <view class="safe-bottom"></view>
    </scroll-view>

    <!-- 忘记密码弹窗 -->
    <u-popup :show="showForgotModal" mode="center" :round="20" :closeable="true" @close="showForgotModal = false">
      <view class="forgot-modal">
        <view class="modal-header">
          <text class="modal-title">忘记密码</text>
        </view>
        <view class="modal-body">
          <!-- 手机号 -->
          <view class="form-item">
            <view class="label">
              <u-icon name="phone" color="#10b981" size="12"></u-icon>
              <text class="label-text">手机号</text>
            </view>
            <view class="input-wrap">
              <u-icon name="phone" color="#6b7280" size="14" style="margin-right: 12rpx;"></u-icon>
              <input 
                v-model="forgotForm.phone" 
                type="number" 
                placeholder="请输入手机号"
                maxlength="11"
                class="input-field"
              />
            </view>
          </view>

          <!-- 验证码 -->
          <view class="form-item">
            <view class="label">
              <u-icon name="shield" color="#10b981" size="12"></u-icon>
              <text class="label-text">验证码</text>
            </view>
            <view class="captcha-row">
              <view class="input-wrap flex-1">
                <u-icon name="shield" color="#6b7280" size="14" style="margin-right: 12rpx;"></u-icon>
                <input 
                  v-model="forgotForm.code" 
                  type="number" 
                  placeholder="请输入验证码"
                  maxlength="6"
                  class="input-field"
                />
              </view>
              <button 
                class="code-btn" 
                :class="{ 'disabled': forgotCountdown > 0 }"
                :disabled="forgotCountdown > 0"
                @click="sendForgotCode"
              >
                {{ forgotCountdown > 0 ? `${forgotCountdown}秒后重发` : '获取验证码' }}
              </button>
            </view>
          </view>

          <!-- 新密码 -->
          <view class="form-item">
            <view class="label">
              <u-icon name="lock" color="#10b981" size="12"></u-icon>
              <text class="label-text">新密码</text>
            </view>
            <view class="input-wrap">
              <u-icon name="lock" color="#6b7280" size="14" style="margin-right: 12rpx;"></u-icon>
              <input 
                v-model="forgotForm.newPassword" 
                :type="forgotPasswordVisible ? 'text' : 'password'"
                placeholder="请输入新密码（6-20位）"
                class="input-field"
              />
              <u-icon 
                :name="forgotPasswordVisible ? 'eye' : 'eye-off'" 
                color="#6b7280" 
                size="14"
                @click="forgotPasswordVisible = !forgotPasswordVisible"
              ></u-icon>
            </view>
          </view>

          <!-- 确认密码 -->
          <view class="form-item">
            <view class="label">
              <u-icon name="lock" color="#10b981" size="12"></u-icon>
              <text class="label-text">确认密码</text>
            </view>
            <view class="input-wrap">
              <u-icon name="lock" color="#6b7280" size="14" style="margin-right: 12rpx;"></u-icon>
              <input 
                v-model="forgotForm.confirmPassword" 
                type="password"
                placeholder="请再次输入新密码"
                class="input-field"
              />
            </view>
          </view>

          <!-- 按钮组 -->
          <view class="modal-footer">
            <button class="cancel-btn" @click="showForgotModal = false">取消</button>
            <button class="confirm-btn" @click="handleResetPassword">确认修改</button>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import FaIcon from '@/components/common/FaIcon.vue'

// 当前标签
const currentTab = ref('login')

// 登录表单
const loginForm = ref({
  account: '',
  password: '',
  captcha: ''
})
const loginPasswordVisible = ref(false)
const rememberPassword = ref(true)
const agreeLogin = ref(true)

// 注册表单
const registerForm = ref({
  phone: '',
  password: '',
  confirmPassword: '',
  smsCode: ''
})
const registerPasswordVisible = ref(false)
const agreeRegister = ref(true)

// 忘记密码表单
const forgotForm = ref({
  phone: '',
  code: '',
  newPassword: '',
  confirmPassword: ''
})
const forgotPasswordVisible = ref(false)
const showForgotModal = ref(false)

// 验证码
const captchaCode = ref('AB12')
const smsCountdown = ref(0)
const forgotCountdown = ref(0)

// 切换标签
const switchTab = (tab) => {
  currentTab.value = tab
}

// 刷新验证码
const refreshCaptcha = () => {
  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'
  let code = ''
  for (let i = 0; i < 4; i++) {
    code += chars.charAt(Math.floor(Math.random() * chars.length))
  }
  captchaCode.value = code
}

// 发送短信验证码
const sendSmsCode = () => {
  const phone = registerForm.value.phone
  
  if (!phone) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
    return
  }
  
  const phoneRegex = /^1[3-9]\d{9}$/
  if (!phoneRegex.test(phone)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    })
    return
  }
  
  // TODO: 调用发送验证码API
  uni.showToast({
    title: '验证码已发送',
    icon: 'success'
  })
  
  smsCountdown.value = 60
  const timer = setInterval(() => {
    smsCountdown.value--
    if (smsCountdown.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)
}

// 发送忘记密码验证码
const sendForgotCode = () => {
  const phone = forgotForm.value.phone
  
  if (!phone) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
    return
  }
  
  const phoneRegex = /^1[3-9]\d{9}$/
  if (!phoneRegex.test(phone)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    })
    return
  }
  
  // TODO: 调用发送验证码API
  uni.showToast({
    title: '验证码已发送',
    icon: 'success'
  })
  
  forgotCountdown.value = 60
  const timer = setInterval(() => {
    forgotCountdown.value--
    if (forgotCountdown.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)
}

// 登录
const handleLogin = () => {
  const { account, password, captcha } = loginForm.value
  
  if (!agreeLogin.value) {
    uni.showToast({
      title: '请先同意用户协议和隐私政策',
      icon: 'none'
    })
    return
  }
  
  if (!account) {
    uni.showToast({
      title: '请输入账号',
      icon: 'none'
    })
    return
  }
  
  if (!password) {
    uni.showToast({
      title: '请输入密码',
      icon: 'none'
    })
    return
  }
  
  if (!captcha) {
    uni.showToast({
      title: '请输入验证码',
      icon: 'none'
    })
    return
  }
  
  if (captcha.toUpperCase() !== captchaCode.value) {
    uni.showToast({
      title: '验证码错误',
      icon: 'none'
    })
    refreshCaptcha()
    loginForm.value.captcha = ''
    return
  }
  
  // TODO: 调用登录API
  uni.showToast({
    title: '登录成功',
    icon: 'success'
  })
  
  setTimeout(() => {
    uni.reLaunch({ url: '/pages/yjyny/home/index' })
  }, 1500)
}

// 注册
const handleRegister = () => {
  const { phone, password, confirmPassword, smsCode } = registerForm.value
  
  if (!agreeRegister.value) {
    uni.showToast({
      title: '请先同意用户协议和隐私政策',
      icon: 'none'
    })
    return
  }
  
  if (!phone) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
    return
  }
  
  const phoneRegex = /^1[3-9]\d{9}$/
  if (!phoneRegex.test(phone)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    })
    return
  }
  
  if (!password) {
    uni.showToast({
      title: '请输入密码',
      icon: 'none'
    })
    return
  }
  
  if (password.length < 6 || password.length > 20) {
    uni.showToast({
      title: '密码长度应为6-20位',
      icon: 'none'
    })
    return
  }
  
  if (password !== confirmPassword) {
    uni.showToast({
      title: '两次输入的密码不一致',
      icon: 'none'
    })
    return
  }
  
  if (!smsCode) {
    uni.showToast({
      title: '请输入短信验证码',
      icon: 'none'
    })
    return
  }
  
  // TODO: 调用注册API
  uni.showToast({
    title: '注册成功',
    icon: 'success'
  })
  
  setTimeout(() => {
    switchTab('login')
    loginForm.value.account = phone
    loginForm.value.password = password
  }, 1500)
}

// 重置密码
const handleResetPassword = () => {
  const { phone, code, newPassword, confirmPassword } = forgotForm.value
  
  if (!phone) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
    return
  }
  
  if (!code) {
    uni.showToast({
      title: '请输入验证码',
      icon: 'none'
    })
    return
  }
  
  if (!newPassword) {
    uni.showToast({
      title: '请输入新密码',
      icon: 'none'
    })
    return
  }
  
  if (newPassword.length < 6 || newPassword.length > 20) {
    uni.showToast({
      title: '密码长度应为6-20位',
      icon: 'none'
    })
    return
  }
  
  if (newPassword !== confirmPassword) {
    uni.showToast({
      title: '两次输入的密码不一致',
      icon: 'none'
    })
    return
  }
  
  // TODO: 调用重置密码API
  uni.showToast({
    title: '密码修改成功',
    icon: 'success'
  })
  
  setTimeout(() => {
    showForgotModal.value = false
    loginForm.value.account = phone
    loginForm.value.password = ''
  }, 1500)
}

// 返回
const handleBack = () => {
  uni.reLaunch({ url: '/pages/yjyny/home/index' })
}

// 初始化
refreshCaptcha()
</script>

<style lang="scss" scoped>
.login-page {
  min-height: 100vh;
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 25%, #ffffff 50%, #f0fdf4 75%, #ffffff 100%);
}

// 动态背景
.dynamic-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
}

.floating-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(220, 252, 231, 0.4);
  backdrop-filter: blur(15rpx);
  animation: float 20s infinite ease-in-out;
  
  &.circle-1 {
    width: 400rpx;
    height: 400rpx;
    top: 10%;
    left: 5%;
  }
  
  &.circle-2 {
    width: 360rpx;
    height: 360rpx;
    top: 50%;
    right: 8%;
    animation-delay: -5s;
  }
  
  &.circle-3 {
    width: 300rpx;
    height: 300rpx;
    bottom: 15%;
    left: 15%;
    animation-delay: -10s;
  }
  
  &.circle-4 {
    width: 440rpx;
    height: 440rpx;
    top: 25%;
    right: 18%;
    animation-delay: -15s;
  }
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(60rpx, -60rpx);
  }
  66% {
    transform: translate(-40rpx, 40rpx);
  }
}

// 内容滚动区
.content-scroll {
  height: 100vh;
  position: relative;
  z-index: 1;
}

// 返回按钮
.back-btn-wrap {
  position: absolute;
  top: 32rpx;
  left: 32rpx;
  z-index: 10;
}

.back-btn {
  width: 80rpx;
  height: 80rpx;
  border-radius: 24rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20rpx);
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
  border: 2rpx solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

// Logo区域
.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 96rpx 48rpx 64rpx;
}

.logo-wrap {
  width: 192rpx;
  height: 192rpx;
  border-radius: 64rpx;
  background: linear-gradient(135deg, #10b981, #059669);
  backdrop-filter: blur(12rpx);
  box-shadow: 0 16rpx 48rpx rgba(16, 185, 129, 0.4);
  border: 4rpx solid rgba(16, 185, 129, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32rpx;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 16rpx 48rpx rgba(16, 185, 129, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 16rpx 64rpx rgba(16, 185, 129, 0.6);
  }
}

.app-title {
  font-size: 56rpx;
  font-weight: bold;
  color: #10b981;
  margin-bottom: 16rpx;
}

.app-subtitle {
  font-size: 28rpx;
  color: #6b7280;
}

.pulse-dots {
  display: flex;
  gap: 16rpx;
  margin-top: 32rpx;
}

.dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: rgba(16, 185, 129, 0.6);
  animation: pulse-dot 1.5s ease-in-out infinite;
  
  &.delay-1 {
    animation-delay: 0.2s;
  }
  
  &.delay-2 {
    animation-delay: 0.4s;
  }
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

// 表单区域
.form-section {
  padding: 0 48rpx 80rpx;
}

.form-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(40rpx);
  border: 2rpx solid rgba(255, 255, 255, 0.2);
  border-radius: 48rpx;
  box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.12);
  padding: 40rpx;
}

// 标签栏
.tab-bar {
  display: flex;
  border-bottom: 2rpx solid #f3f4f6;
  margin-bottom: 32rpx;
}

.tab-item {
  flex: 1;
  padding: 24rpx 0;
  text-align: center;
  position: relative;
  
  &.active {
    .tab-text {
      color: #10b981;
      font-weight: 600;
    }
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 6rpx;
      background-color: #10b981;
      border-radius: 3rpx;
    }
  }
}

.tab-text {
  font-size: 30rpx;
  color: #6b7280;
  transition: all 0.3s;
}

// 表单内容
.form-content {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.label {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.label-text {
  font-size: 28rpx;
  font-weight: 500;
  color: #1f2937;
}

.input-wrap {
  display: flex;
  align-items: center;
  padding: 20rpx 32rpx;
  background-color: #f9fafb;
  border: 2rpx solid #e5e7eb;
  border-radius: 24rpx;
  transition: all 0.3s;
  
  &.flex-1 {
    flex: 1;
  }
}

.input-field {
  flex: 1;
  font-size: 28rpx;
  color: #1f2937;
  border: none;
  background: transparent;
}

.captcha-row {
  display: flex;
  gap: 16rpx;
}

.captcha-img {
  width: 220rpx;
  height: 84rpx;
  background-color: #f0fdf4;
  border: 2rpx solid #e5e7eb;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.captcha-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #10b981;
  letter-spacing: 8rpx;
}

.code-btn {
  padding: 20rpx 32rpx;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  font-size: 24rpx;
  font-weight: 500;
  border-radius: 24rpx;
  border: none;
  white-space: nowrap;
  
  &.disabled {
    opacity: 0.5;
  }
}

.remember-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.remember-label {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.remember-text {
  font-size: 24rpx;
  color: #6b7280;
}

.forgot-text {
  font-size: 24rpx;
  color: #10b981;
}

.agree-row {
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
}

.agree-text {
  font-size: 22rpx;
  color: #6b7280;
  line-height: 1.5;
}

.link-text {
  color: #10b981;
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  padding: 0 32rpx;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  font-size: 28rpx;
  font-weight: 500;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.3);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16rpx;
  line-height: 1;
}

// 忘记密码弹窗
.forgot-modal {
  width: 600rpx;
  background-color: #ffffff;
  border-radius: 32rpx;
}

.modal-header {
  padding: 48rpx 48rpx 32rpx;
  border-bottom: 2rpx solid #f3f4f6;
}

.modal-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #1f2937;
}

.modal-body {
  padding: 32rpx 48rpx;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.modal-footer {
  display: flex;
  gap: 24rpx;
  margin-top: 16rpx;
}

.cancel-btn {
  flex: 1;
  padding: 24rpx;
  background-color: #f3f4f6;
  color: #1f2937;
  font-size: 28rpx;
  font-weight: 500;
  border-radius: 24rpx;
  border: none;
}

.confirm-btn {
  flex: 1;
  padding: 24rpx;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  font-size: 28rpx;
  font-weight: 500;
  border-radius: 24rpx;
  border: none;
}

// 底部安全区
.safe-bottom {
  height: 160rpx;
}
</style>
